<template>
	<el-dialog
		v-model="visible"
		:title="dialogTitle"
		width="80%"
		:max-width="800"
		:close-on-click-modal="false"
		:close-on-press-escape="true"
		class="recruitment-detail-dialog"
		@close="handleClose"
	>
		<div v-if="row" class="recruitment-detail">
			<!-- 职位基本信息 -->
			<div class="detail-section">
				<div class="section-header">
					<el-icon class="section-icon"><Briefcase /></el-icon>
					<h3 class="section-title">职位信息</h3>
				</div>
				<div class="section-content">
					<div class="info-grid">
						<div class="info-item">
							<label class="info-label">职位名称:</label>
							<span class="info-value">{{ row.Title }}</span>
						</div>
						<div v-if="row.JobPosition?.Name" class="info-item">
							<label class="info-label">岗位:</label>
							<span class="info-value">{{ row.JobPosition.Name }}</span>
						</div>
						<div class="info-item">
							<label class="info-label">招聘人数:</label>
							<span class="info-value hire-number">{{ row.HireNumber }}人</span>
						</div>
						<div v-if="row.ExpectedDate" class="info-item">
							<label class="info-label">期望到岗:</label>
							<span class="info-value">{{ formatDate(row.ExpectedDate) }}</span>
						</div>
					</div>
				</div>
			</div>

			<!-- 职位描述 -->
			<div v-if="row.Description" class="detail-section">
				<div class="section-header">
					<el-icon class="section-icon"><Document /></el-icon>
					<h3 class="section-title">职位描述</h3>
				</div>
				<div class="section-content">
					<div class="description-content" v-html="formatDescription(row.Description)"></div>
				</div>
			</div>

			<!-- 任职要求 -->
			<div class="detail-section">
				<div class="section-header">
					<el-icon class="section-icon"><UserFilled /></el-icon>
					<h3 class="section-title">任职要求</h3>
				</div>
				<div class="section-content">
					<div class="requirements-grid">
						<div v-if="row.EducationRequirement" class="requirement-item">
							<label class="requirement-label">学历要求:</label>
							<span class="requirement-value">{{ row.EducationRequirement }}</span>
						</div>
						<div v-if="row.GenderRequirement" class="requirement-item">
							<label class="requirement-label">性别要求:</label>
							<span class="requirement-value">{{ row.GenderRequirement }}</span>
						</div>
						<div v-if="row.AgeRequirement" class="requirement-item">
							<label class="requirement-label">年龄要求:</label>
							<span class="requirement-value">{{ row.AgeRequirement }}</span>
						</div>
						<div v-if="row.MajorRequirement" class="requirement-item">
							<label class="requirement-label">专业要求:</label>
							<span class="requirement-value">{{ row.MajorRequirement }}</span>
						</div>
					</div>
					<div v-if="row.JobRequirement" class="job-requirement-detail">
						<label class="requirement-label">工作要求:</label>
						<div class="requirement-content" v-html="formatDescription(row.JobRequirement)"></div>
					</div>
					<div v-if="row.OtherRequirement" class="other-requirement">
						<label class="requirement-label">其他要求:</label>
						<div class="requirement-content" v-html="formatDescription(row.OtherRequirement)"></div>
					</div>
				</div>
			</div>

			<!-- 薪资福利 -->
			<div v-if="row.SalaryRange || row.Benefits" class="detail-section">
				<div class="section-header">
					<el-icon class="section-icon"><Money /></el-icon>
					<h3 class="section-title">薪资福利</h3>
				</div>
				<div class="section-content">
					<div v-if="row.SalaryRange" class="salary-info">
						<label class="info-label">薪资范围:</label>
						<span class="salary-value">{{ row.SalaryRange }}</span>
					</div>
					<div v-if="row.Benefits" class="benefits-info">
						<label class="info-label">福利待遇:</label>
						<div class="benefits-content" v-html="formatDescription(row.Benefits)"></div>
					</div>
				</div>
			</div>

			<!-- 联系方式 */
			<div class="detail-section">
				<div class="section-header">
					<el-icon class="section-icon"><Phone /></el-icon>
					<h3 class="section-title">联系方式</h3>
				</div>
				<div class="section-content">
					<div class="contact-grid">
						<div v-if="row.ContactPerson" class="contact-item">
							<label class="contact-label">联系人:</label>
							<span class="contact-value">{{ row.ContactPerson }}</span>
						</div>
						<div v-if="row.ContactPhone" class="contact-item">
							<label class="contact-label">联系电话:</label>
							<span class="contact-value phone">{{ row.ContactPhone }}</span>
						</div>
						<div v-if="row.ContactEmail" class="contact-item">
							<label class="contact-label">联系邮箱:</label>
							<span class="contact-value email">{{ row.ContactEmail }}</span>
						</div>
					</div>
				</div>
			</div>

			<!-- 发布信息 -->
			<div class="detail-section">
				<div class="section-header">
					<el-icon class="section-icon"><Calendar /></el-icon>
					<h3 class="section-title">发布信息</h3>
				</div>
				<div class="section-content">
					<div class="publish-grid">
						<div v-if="row.PublishStartDate" class="publish-item">
							<label class="publish-label">发布时间:</label>
							<span class="publish-value">{{ formatDate(row.PublishStartDate) }}</span>
						</div>
						<div v-if="row.PublishEndDate" class="publish-item">
							<label class="publish-label">截止时间:</label>
							<span class="publish-value end-date">{{ formatDate(row.PublishEndDate) }}</span>
						</div>
						<div class="publish-item">
							<label class="publish-label">发布状态:</label>
							<span class="publish-value status">
								<el-tag :type="row.IsExternalPublish ? 'success' : 'info'" size="small">
									{{ row.IsExternalPublish ? '对外发布' : '内部发布' }}
								</el-tag>
							</span>
						</div>
						<div v-if="row.WorkflowStatus" class="publish-item">
							<label class="publish-label">审核状态:</label>
							<span class="publish-value status">
								<el-tag :type="getStatusType(row.WorkflowStatus)" size="small">
									{{ row.WorkflowStatus }}
								</el-tag>
							</span>
						</div>
					</div>
				</div>
			</div>

			<!-- 备注信息 -->
			<div v-if="row.Remark" class="detail-section">
				<div class="section-header">
					<el-icon class="section-icon"><EditPen /></el-icon>
					<h3 class="section-title">备注信息</h3>
				</div>
				<div class="section-content">
					<div class="remark-content" v-html="formatDescription(row.Remark)"></div>
				</div>
			</div>
		</div>
	</el-dialog>
</template>

<script setup lang="ts">
import { ref, computed, watch } from 'vue';
import { Briefcase, Document, UserFilled, Money, Phone, Calendar, EditPen } from '@element-plus/icons-vue';
import { formatDate as _formatDate } from '/@/utils/formatTime';

/**
 * 组件属性定义
 */
interface Props {
	/** 招聘信息数据 */
	row: any;
	/** 对话框显示状态 */
	visible: boolean;
}

const props = defineProps<Props>();
const emit = defineEmits(['update:visible']);

// 本地显示状态
const visible = computed({
	get: () => props.visible,
	set: (value: boolean) => emit('update:visible', value),
});

// 对话框标题
const dialogTitle = computed(() => {
	if (!props.row) return '招聘详情';
	return `${props.row.Title || '招聘详情'}`;
});

/**
 * 关闭对话框
 */
function handleClose() {
	visible.value = false;
}

/**
 * 格式化日期显示
 */
function formatDate(dateStr: string | Date | null): string {
	if (!dateStr) return '';
	const date = typeof dateStr === 'string' ? new Date(dateStr) : dateStr;
	return _formatDate(date, 'YYYY-mm-dd');
}

/**
 * 格式化描述内容，支持换行显示
 */
function formatDescription(content: string): string {
	if (!content) return '';
	return content.replace(/\n/g, '<br>');
}

/**
 * 获取状态标签类型
 */
function getStatusType(status: string): string {
	const typeMap: Record<string, string> = {
		待提交: 'info',
		提交中: 'warning',
		审核中: 'warning',
		已完成: 'success',
		已取消: 'danger',
		待处理: 'info',
		处理中: 'warning',
		已处理: 'success',
	};
	return typeMap[status] || 'info';
}
</script>

<style scoped>
/* 对话框样式 */
.recruitment-detail-dialog :deep(.el-dialog) {
	border-radius: var(--home-radius-lg);
}

.recruitment-detail-dialog :deep(.el-dialog__header) {
	background: linear-gradient(135deg, var(--home-primary-lightest), var(--home-bg-primary));
	border-radius: var(--home-radius-lg) var(--home-radius-lg) 0 0;
	padding: var(--home-spacing-lg) var(--home-spacing-xl);
	border-bottom: 1px solid var(--home-border-extra-light);
}

.recruitment-detail-dialog :deep(.el-dialog__title) {
	font-size: 18px;
	font-weight: 600;
	color: var(--home-text-primary);
}

.recruitment-detail-dialog :deep(.el-dialog__body) {
	padding: var(--home-spacing-lg) var(--home-spacing-xl);
	max-height: 70vh;
	overflow-y: auto;
}

/* 详情内容样式 */
.recruitment-detail {
	display: flex;
	flex-direction: column;
	gap: var(--home-spacing-xl);
}

/* 区块样式 */
.detail-section {
	background: var(--home-bg-secondary);
	border: 1px solid var(--home-border-extra-light);
	border-radius: var(--home-radius-lg);
	overflow: hidden;
}

.section-header {
	display: flex;
	align-items: center;
	gap: var(--home-spacing-sm);
	padding: var(--home-spacing-md) var(--home-spacing-lg);
	background: linear-gradient(135deg, var(--home-primary-lightest), rgba(255, 255, 255, 0.8));
	border-bottom: 1px solid var(--home-border-extra-light);
}

.section-icon {
	font-size: 18px;
	color: var(--home-primary);
}

.section-title {
	font-size: 16px;
	font-weight: 600;
	color: var(--home-text-primary);
	margin: 0;
}

.section-content {
	padding: var(--home-spacing-lg);
}

/* 信息网格样式 */
.info-grid,
.requirements-grid,
.contact-grid,
.publish-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: var(--home-spacing-md);
}

.info-item,
.requirement-item,
.contact-item,
.publish-item {
	display: flex;
	align-items: center;
	gap: var(--home-spacing-sm);
}

.info-label,
.requirement-label,
.contact-label,
.publish-label {
	font-weight: 500;
	color: var(--home-text-secondary);
	min-width: 80px;
	flex-shrink: 0;
}

.info-value,
.requirement-value,
.contact-value,
.publish-value {
	color: var(--home-text-primary);
	font-weight: 500;
}

/* 特殊值样式 */
.hire-number {
	color: var(--home-success);
	font-weight: 600;
}

.salary-value {
	color: var(--home-success);
	font-weight: 600;
	font-size: 16px;
}

.phone,
.email {
	color: var(--home-primary);
	cursor: pointer;
}

.phone:hover,
.email:hover {
	text-decoration: underline;
}

.end-date {
	color: var(--home-warning);
	font-weight: 600;
}

.status {
	display: flex;
	align-items: center;
}

/* 内容区域样式 */
.description-content,
.requirement-content,
.benefits-content,
.remark-content {
	line-height: 1.6;
	color: var(--home-text-regular);
	background: var(--home-bg-page);
	padding: var(--home-spacing-md);
	border-radius: var(--home-radius-sm);
	border-left: 3px solid var(--home-primary-light);
}

.job-requirement-detail,
.other-requirement {
	margin-top: var(--home-spacing-md);
}

.job-requirement-detail .requirement-label,
.other-requirement .requirement-label {
	display: block;
	margin-bottom: var(--home-spacing-sm);
}

.salary-info {
	display: flex;
	align-items: center;
	gap: var(--home-spacing-sm);
	margin-bottom: var(--home-spacing-md);
}

.benefits-info .info-label {
	display: block;
	margin-bottom: var(--home-spacing-sm);
}

/* 底部按钮样式 */
.dialog-footer {
	display: flex;
	justify-content: flex-end;
	gap: var(--home-spacing-sm);
	padding: var(--home-spacing-md) 0 0;
	border-top: 1px solid var(--home-border-extra-light);
}

/* 响应式设计 */
@media (max-width: 768px) {
	.recruitment-detail-dialog :deep(.el-dialog) {
		width: 95% !important;
		margin: 5vh auto !important;
	}

	.recruitment-detail-dialog :deep(.el-dialog__body) {
		padding: var(--home-spacing-md);
		max-height: 75vh;
	}

	.section-header {
		padding: var(--home-spacing-sm) var(--home-spacing-md);
	}

	.section-content {
		padding: var(--home-spacing-md);
	}

	.info-grid,
	.requirements-grid,
	.contact-grid,
	.publish-grid {
		grid-template-columns: 1fr;
		gap: var(--home-spacing-sm);
	}

	.info-item,
	.requirement-item,
	.contact-item,
	.publish-item {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--home-spacing-xs);
	}

	.info-label,
	.requirement-label,
	.contact-label,
	.publish-label {
		min-width: auto;
		font-size: 13px;
	}
}

@media (max-width: 480px) {
	.recruitment-detail-dialog :deep(.el-dialog) {
		width: 100% !important;
		margin: 0 !important;
		height: 100vh;
		border-radius: 0;
	}

	.recruitment-detail-dialog :deep(.el-dialog__header) {
		border-radius: 0;
	}

	.section-title {
		font-size: 15px;
	}

	.salary-value {
		font-size: 15px;
	}
}
</style>
